<template>
  <el-dialog
    v-model="dialogVisible"
    title="YAML脚本语法帮助"
    width="80%"
    :close-on-click-modal="false"
  >
    <div class="help-content">
      <el-collapse v-model="activeTab">
        <!-- 基础结构 -->
        <el-collapse-item title="基础结构" name="basic">
          <div class="help-section">
            <p>UI自动化脚本采用YAML格式，基础结构如下：</p>
            <CodeHighlight language="yaml" :code="basicStructure" />
          </div>
        </el-collapse-item>

        <!-- 自动规划 -->
        <el-collapse-item title="自动规划 (ai/aiAction)" name="auto-planning">
          <div class="help-section">
            <p>使用AI自动规划和执行操作：</p>
            <CodeHighlight language="yaml" :code="autoPlanning" />
            <div class="note">
              <p><strong>说明：</strong></p>
              <ul>
                <li><code>ai</code> 是 <code>aiAction</code> 的简写形式</li>
                <li><code>cacheable</code> 参数用于控制是否缓存AI调用结果</li>
                <li>使用自然语言描述要执行的操作</li>
              </ul>
            </div>
          </div>
        </el-collapse-item>

        <!-- 即时操作 -->
        <el-collapse-item title="即时操作" name="instant-actions">
          <div class="help-section">
            <p>具体的UI操作指令：</p>
            
            <h4>点击操作 (aiTap)</h4>
            <CodeHighlight language="yaml" :code="tapAction" />
            
            <h4>鼠标悬停 (aiHover)</h4>
            <CodeHighlight language="yaml" :code="hoverAction" />
            
            <h4>输入文本 (aiInput)</h4>
            <CodeHighlight language="yaml" :code="inputAction" />
            
            <h4>按键操作 (aiKeyboardPress)</h4>
            <CodeHighlight language="yaml" :code="keyboardAction" />
            
            <h4>滚动操作 (aiScroll)</h4>
            <CodeHighlight language="yaml" :code="scrollAction" />
          </div>
        </el-collapse-item>

        <!-- 断言和验证 -->
        <el-collapse-item title="断言和验证" name="assertions">
          <div class="help-section">
            <p>用于验证页面状态和数据：</p>
            <CodeHighlight language="yaml" :code="assertions" />
          </div>
        </el-collapse-item>

        <!-- 数据提取 -->
        <el-collapse-item title="数据提取" name="data-extraction">
          <div class="help-section">
            <p>从页面提取数据：</p>
            <CodeHighlight language="yaml" :code="dataExtraction" />
          </div>
        </el-collapse-item>

        <!-- 其他操作 -->
        <el-collapse-item title="其他操作" name="other-actions">
          <div class="help-section">
            <p>其他实用操作：</p>
            <CodeHighlight language="yaml" :code="otherActions" />
          </div>
        </el-collapse-item>

        <!-- 完整示例 -->
        <el-collapse-item title="完整示例" name="full-example">
          <div class="help-section">
            <p>一个完整的登录测试示例：</p>
            <CodeHighlight language="yaml" :code="fullExample" />
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import CodeHighlight from '../../components/CodeHighlight.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible'])

// 响应式数据
const activeTab = ref(['basic'])

// 计算属性
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 代码示例
const basicStructure = `tasks:
  - name: "任务名称"
    continueOnError: false  # 可选，错误时是否继续执行
    flow:
      # 在这里定义具体的操作步骤
      - ai: "执行某个操作"
      - aiTap: "点击某个按钮"
      - aiAssert: "验证某个状态"`

const autoPlanning = `# 使用 ai 指令（简写）
- ai: "打开用户管理页面"
  cacheable: true

# 使用 aiAction 指令（完整形式）
- aiAction: "填写用户注册表单"
  cacheable: false`

const tapAction = `# 基本点击操作
- aiTap: "登录按钮"

# 带深度思考的点击
- aiTap: "提交订单按钮"
  deepThink: true

# 使用 xpath 定位元素
- aiTap: "确认按钮"
  xpath: "//button[@id='confirm']"
  cacheable: true`

const hoverAction = `# 鼠标悬停操作
- aiHover: "导航菜单项"
  deepThink: false
  cacheable: true

# 悬停到下拉菜单
- aiHover: "用户头像"
  xpath: "//div[@class='user-avatar']"`

const inputAction = `# 输入文本
- aiInput: "用户名123"
  locate: "用户名输入框"

# 带定位参数的输入
- aiInput: "test@example.com"
  locate: "邮箱地址输入框"
  deepThink: true
  xpath: "//input[@name='email']"`

const keyboardAction = `# 按下回车键
- aiKeyboardPress: "Enter"
  locate: "搜索输入框"

# 按下Tab键
- aiKeyboardPress: "Tab"

# 按下Escape键
- aiKeyboardPress: "Escape"
  locate: "模态对话框"`

const scrollAction = `# 向下滚动
- aiScroll:
    direction: "down"
    scrollType: "once"
    distance: 300

# 滚动到底部
- aiScroll:
    direction: "down" 
    scrollType: "untilBottom"

# 滚动特定元素
- aiScroll:
    direction: "up"
    scrollType: "once"
    distance: 200
    locate: "内容区域"
    deepThink: true`

const assertions = `# 基本断言
- aiAssert: "页面显示'登录成功'提示"

# 带错误信息的断言
- aiAssert: "用户列表包含新创建的用户"
  errorMessage: "新用户未在列表中显示"

# 等待条件满足
- aiWaitFor: "页面加载完成"
  timeout: 30000`

const dataExtraction = `# 提取数据
- aiQuery: "获取当前页面的用户列表，返回包含姓名和邮箱的JSON数组"
  name: "user_list"

# 提取单个值
- aiQuery: "获取当前登录用户的用户名"
  name: "current_username"`

const otherActions = `# 等待指定时间
- sleep: 2000

# 截图并记录
- logScreenshot: "登录页面"
  content: "用户登录界面截图"

# 执行JavaScript代码
- javascript: "document.title = '测试页面'"
  name: "page_title"`

const fullExample = `tasks:
  - name: "用户登录测试"
    continueOnError: false
    flow:
      # 1. 导航到登录页面
      - ai: "打开登录页面"
      - logScreenshot: "登录页面"
        content: "初始登录页面"
      
      # 2. 验证页面元素
      - aiAssert: "页面显示登录表单"
      - aiAssert: "存在用户名和密码输入框"
      
      # 3. 输入登录信息
      - aiInput: "admin"
        locate: "用户名输入框"
      - aiInput: "password123"
        locate: "密码输入框"
      
      # 4. 点击登录按钮
      - aiTap: "登录按钮"
      
      # 5. 等待登录完成
      - aiWaitFor: "页面跳转到首页"
        timeout: 10000
      
      # 6. 验证登录成功
      - aiAssert: "页面显示用户头像"
      - aiAssert: "页面URL包含dashboard"
      
      # 7. 提取用户信息
      - aiQuery: "获取当前登录用户的用户名和角色信息"
        name: "user_info"
      
      # 8. 记录最终状态
      - logScreenshot: "登录成功"
        content: "用户成功登录后的首页"`

// 方法
const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style lang="scss" scoped>
.help-content {
  max-height: 70vh;
  overflow-y: auto;
  
  .help-section {
    padding: 16px 0;
    
    h4 {
      margin: 16px 0 8px 0;
      color: #303133;
      font-weight: 600;
    }
    
    p {
      margin: 8px 0;
      color: #606266;
      line-height: 1.6;
    }
    
    .note {
      margin-top: 16px;
      padding: 12px;
      background-color: #f0f9ff;
      border-left: 4px solid #409eff;
      border-radius: 4px;
      
      p {
        margin: 0 0 8px 0;
        color: #303133;
        font-weight: 600;
      }
      
      ul {
        margin: 8px 0 0 0;
        padding-left: 20px;
        
        li {
          margin: 4px 0;
          color: #606266;
          line-height: 1.5;
          
          code {
            padding: 2px 4px;
            background-color: rgba(64, 158, 255, 0.1);
            border-radius: 2px;
            font-family: Monaco, Menlo, monospace;
            font-size: 12px;
            color: #409eff;
          }
        }
      }
    }
  }
}

.dialog-footer {
  text-align: right;
}

:deep(.el-collapse) {
  border: none;
  
  .el-collapse-item {
    .el-collapse-item__header {
      font-weight: 600;
      font-size: 14px;
      background-color: #f8f9fa;
      border-bottom: 1px solid #e4e7ed;
    }
    
    .el-collapse-item__content {
      padding: 0;
    }
  }
}

:deep(.el-dialog) {
  .el-dialog__body {
    padding: 20px;
  }
}
</style>
